<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/19
  Time: 14:23
  To change this template use File | Settings | File Templates.
--%>
<%@page contentType="text/html;charset=utf-8" isELIgnored="false" pageEncoding="UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>城市列表</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: "#myTable",//一般都是写id选择器
                url: "selectAllLay.do", //数据接口;请求地址
                page: true,//开启分页,

                toolbar:"#myToolbar",//id选择器的写法

                limit:10,
                limits:[10,80,100,900],
                title:"图书列表",

                //列
                cols: [[
                    {type:"checkbox"},
                    {title:"编号",field:"cityId"},
                    {title:"代号",field:"code"},
                    {title:"城市名",field:"cityName"},
                    // 列格式化templet:"#priceTemplet"
                    {title:"操作",templet:"#caoZuo"}
                ]]
            });

        });
        layui.use(["form","layer","table"],function () {
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;

            // form.verify({
            //     bookName:function(value,item){
            //         var bookNameReg=/^\w{1,}$/;
            //         if(!bookNameReg.test(value)){
            //             return "请输入正确的书名";
            //         }
            //     },
            //
            //     price:[
            //         /^[1-9]\d*(\.\d{1,2})?$/,
            //         "请输入正确的价格"
            //     ]
            //     /*price:function(value,item){
            //
            //         var priceReg=/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
            //         if(!priceReg.test(value)){
            //             return "请输入正确的价格";
            //         }
            //     }*/
            // });


            //当点击提交按钮的时候，会进入到这个函数
            //当所有的验证都通过时，才会进入到这个函数
            form.on("submit(add)",function(data){
                //console.log(data);

                $.ajax({
                    url:"insert.do",
                    data:data.field,
                    type:"post",
                    success:function(data){
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll('page');

                        //2.提示添加成功
                        if(data.isAdd){
                            layer.alert("添加成功",{time:3000});
                        }else{
                            layer.alert("添加失败",{time:3000});
                        }

                        //3.刷新table
                        table.reload("myTable");


                    }
                })
                // return false;//阻止跳转；
            })
        })
        //搜索操作
        function doSearch() {
            //1.获取到输入框中输入的内容
            var cityName = $("#cityName").val();
            //alert(bookName)

            //发送请求，并且接收数据
            layui.use('table', function() {
                var table = layui.table;

                table.reload('myTable', {
                    // 发送额外参数
                    where: {"cityName":cityName}
                });
            });
        }
        //添加弹出层
        function toOpenAddLayer() {
            layui.use('layer', function(){

                layer.open({
                    title:"添加城市",
                    content:$("#addForm"),
                    type:1,
                    maxmin:true
                })
            });

        }
    </script>
    <script id="caoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal">修改</button>
        <button type="button" class="layui-btn layui-btn-danger">删除</button>
    </script>
</head>
<body>
<table id="myTable" lay-data="{id: 'myTable'}"></table>

<div id="myToolbar" style="display: none;">
    <button type="button" class="layui-btn" onclick="toOpenAddLayer()">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger">
        <i class="layui-icon layui-icon-delete"></i> 批量删除
    </button>

    <div class="layui-inline">
        <label class="layui-form-label">城市名</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" class="layui-input" id="cityName">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn layui-btn-normal" onclick="doSearch()">
                <i class="layui-icon layui-icon-search"></i> 搜索
            </button>
        </div>
    </div>
</div>
<form id="addForm" style="display: none" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">代号</label>
        <div class="layui-input-block">
            <input name="code" class="layui-input" placeholder="请输入城市代号" lay-verify="required|code"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市名</label>
        <div class="layui-input-block">
            <input name="cityName" class="layui-input" placeholder="请输入城市名称" lay-verify="required|cityName"/>
        </div>
    </div>
    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="add" class="layui-btn">添加城市</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
</body>
</html>
